<template>
  <div class="amap-page-container">
    <van-nav-bar title="当前位置" left-arrow @click-left="onClickLeft" />
    <div class="amap-page-container-map">
      <el-amap
        ref="map"
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        class="amap-demo"
      >
        <el-amap-marker
          v-for="marker in markers"
          :key="marker"
          :position="marker.position"
        ></el-amap-marker>
      </el-amap>
    </div>
    <div class="amap-page-container-info">
      <div class="amap-page-container-info-static">
        <span class="amap-page-container-info-static-on" v-if="now">在线</span>
        <span class="amap-page-container-info-static-off" v-else>离线</span>
        <span class="amap-page-container-info-static-gpsnum" v-if="now">
          5G信号:{{ signal }} GPS数量:{{ gpsnum }} 电量:{{ electricity }}%
        </span>
      </div>
      <div class="amap-page-container-info-more">
        定位模式：GPS定位 &nbsp;&nbsp;&nbsp;&nbsp;高度：{{ alt }}
        <br />
        定位时间：{{ dt }}
        <br />
        地址：{{ address }}
      </div>
    </div>
  </div>
</template>
 

<script>
import { AMapManager } from "vue-amap";
import mqtt from "mqtt";
var client;
const options = {
  connectTimeout: 40000,
  clean: true,
};
client = mqtt.connect("ws://121.5.58.100:8083/mqtt", options);
// import { AMap } from 'vue-amap';
export default {
  created: function () {
    this.mqttMsg();
  },
  data() {
    return {
      alt: "获取中",
      humi: "获取中",
      temp: "获取中",
      alarm: "获取中",
      address: "获取中",
      dt: "获取中",
      electricity: "",
      signal: "",
      gpsnum: "",
      lng: "",
      lat: "",
      res: "",
      data: "",
      gps: "",
      now: false,
      zoom: 17,
      center: [118.409477233886, 31.340538024902],
      circles: [
        {
          center: [118.409477233886, 31.340538024902],
          radius: 200,
        },
      ],
      markers: [
        {
          position: [118.409477233886, 31.340538024902],
          events: {
            click: () => {
              alert("click marker");
            },
            dragend: (e) => {
              console.log("---event---: dragend");
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
            },
          },
          visible: true,
          draggable: true,
          template: "<span>1</span>",
        },
      ],
      events: {
        init: (o) => {
          console.log(o.getCenter());
          console.log(this.$refs.map.$$getInstance());
          o.getCity((result) => {
            console.log(result);
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          let { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          console.log(self.lng, self.lat);
          let points = [self.lng, self.lat];
          this.getAddress(points);
          let marker = {
            position: [self.lng, self.lat],
          };
          if (!this.markers.length) return;
          this.markers.splice(this.markers.length - 1, 1);

          this.markers.push(marker);
        },
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            },
          },
        },
      ],
      texts: [
        {
          position: [118.41, 31.34],
          text: "hello world",
          offset: [0, 0],
          events: {
            click: () => {
              alert("click text");
            },
          },
        },
      ],
    };
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    mqttMsg() {
      client.on("connect", (e) => {
        console.log("连接成功！！！");
        client.subscribe("/location/pub", { qos: 0 }, (error) => {
          if (!error) {
            console.log("订阅成功");
          } else {
            console.log("订阅失败");
          }
        }),
          client.subscribe("A01/SUB/STATE", { qos: 0 }, (error) => {
            if (!error) {
              console.log("ss订阅成功");
            } else {
              console.log("订阅失败");
            }
          });
      });
      // 接收消息处理
      client.on("message", (topic, message) => {
        if (topic === "A01/SUB/STATE") {
          console.log(message.toString()); //控制台显示接收到的数据
          this.data = message.toString();
          this.res = JSON.parse(message.toString());
          this.electricity = this.res.electricity;
          this.signal = this.res.signal + "db";
          this.temp = this.res.temp;
          this.humi = this.res.humi;
          if (this.res.signal) {
            this.now = true;
          } else {
            this.now = false;
          }
        } else {
          console.log(message.toString()); //控制台显示接收到的数据
          this.data = message.toString();
          this.res = JSON.parse(message.toString());
          this.gpsnum = this.res.satenum;
          this.now = true;
          this.gps = [this.res.latitude, this.res.longitude];
          AMap.convertFrom(this.gps, "gps", (status, result) => {
            if (result.info === "ok") {
              this.lng = result.locations[0].R;
              this.lat = result.locations[0].Q;

              this.center = [this.lng, this.lat];
              this.markers[0].position = [this.lng, this.lat];
              // console.log(o.getCenter())
              let points = [this.lng, this.lat];
              AMap.plugin("AMap.Geocoder", () => {
                var geocoder = new AMap.Geocoder({
                  // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                  radius: 1000,
                  extensions: "all",
                });
                geocoder.getAddress(this.center, (status, result) => {
                  if (status === "complete" && result.info === "OK") {
                    this.address = result.regeocode.formattedAddress;
                  }
                });
              });
            }
          });
        }
      });
    },
    getMap() {
      console.log(AMapManager._componentMap);
      // gaode map instance
      console.log(AMapManager._map);
      alert("click text");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.amap-page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  position: absolute;
  &-map {
    height: 100%;
  }
  &-info {
    line-height: 1;
    transition: 0.5s;
    margin: auto;
    // text-align: center;
    padding: 15px 15px;
    border-radius: 20px;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.5);
    width: 88vw;
    height: auto;
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25px;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    background-color: rgba(255, 255, 255, 0.9);
    &-static {
      display: inline-block;
      width: 100%;

      &-on {
        float: left;
        color: green;
        font-size: 5vw;
      }
      &-off {
        float: left;
        color: red;
        font-size: 5vw;
      }
      &-gpsnum {
        float: right;
        color: blue;
        font-size: 4vw;
      }
    }
    &-more {
      margin-top: 10px;
      color: black;
      font-size: 3.5vw;
      line-height: 6vw;
    }
  }
}
</style>